<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>移动端页面开发过程中经常碰到的一些问题</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            *{
                padding: 0;
                margin: 0;
                -webkit-tap-highlight-color:rgba(0,0,0,0);
            }
            html,body{
                height: 100%;
            }
            body{
                font-size: .28rem;
            }
            .box-bottom{
                position: absolute;
                bottom: 0;
                left: 0;
                height: .8rem;
                width: 100%;
                background-color: #f00;
            }
            input{
                -webkit-transform: translate3d(0,0,0);
            }
            .testInput{
                -webkit-text-security: disc;
            }
        </style>
    </head>
    <body>
        <h1>移动端页面开发过程中经常碰到的一些问题</h1>
        <p>来源:<a href="http://www.mahaixiang.cn/ydseo/1529.html"></a></p>
        <h2>（7）、给body加position:relative</h2>
        <p>
            比如给移动页面做个弹幕的效果，在body里面会有个div一直滚动，从右向左，然后这个div是absolulte的，那一定要给body加relative，否则ios的手机会出现横向滚动条。</p>
        <div class="box-bottom">我在底部</div>
        <a href="http://mini.eastday.com">东方头条</a>
        <script>
            document.documentElement.style.height = window.innerHeight + 'px';
        </script>
    </body>
</html>